<template>
  <div class="component-library" @dragover.prevent @drop="dropInLibrary">
    <div class="agreeemt" @dragstart="drag($event, 'UserView1')" draggable="true">
    <img src="../../public/images//20241105-140945.png" alt="" style="width: 100%;">
    <!-- <div class="agreeemt" @dragstart="drag($event, 'UserView1')" draggable="true"></div> -->
     </div>
  </div>
</template>

<script setup>
import { defineEmits } from 'vue'; // 1. 确保导入 defineEmits

const emit = defineEmits(['componentDropped']); // 2. 正确设置 emit
const drag = (event, componentType) => {
  event.dataTransfer.setData("text/plain", componentType);
  console.log("组件拖动");
};

// 处理组件拖回
const dropInLibrary = (event) => {
  const componentType = event.dataTransfer.getData("text/plain");
  console.log(`拖回的组件: ${componentType}`); // 在这里可以添加逻辑

  // 发射事件到父组件
  emit('componentDropped', componentType);
};


</script>

<style scoped>
.component-library {
  display: flex;
  gap: 10px;
  border: 1px solid #ddd;
  padding: 10px;
  height: auto;
}

.component {
  padding: 10px;
  border: 1px solid #ccc;
  cursor: move;
  background-color: #f1f1f1;
}
</style>